<template>
  <div>
    <!--工具类-->

    <div>
      <Alert type="warning" >独立站查重时不会统计无效和废弃状态的目标客户，只显示重复数大于1的独立站地址。</Alert>
    </div>
    <Row style="padding-top: 16px;text-align: left" align="middle" type="flex" class="y_query_right">
<!--      <Checkbox v-model="tParam.isOnlyInfoed">待开发</Checkbox>-->
      <Button type="primary" style="margin-left: 16px" icon="md-search" @click="search">查询</Button>
      <Button type="info" style="margin-left: 16px" icon="ios-trash" @click="clearSameWebsitesCustomers" :disabled="selectedUrls.length <= 0">批量清理</Button>
    </Row>
    <!--表格和分页-->
<!--    <Table stripe border ref="websiteList" :columns="websiteTableTitles" :data="websiteList"-->
<!--           @on-selection-change="urlSelectedChanged" class="table_css" no-data-text="暂无数据" ></Table>-->

    <div style="text-align: left; margin: 1rem 0 0 25px;">
      <Checkbox v-model="selectedAll" :indeterminate="selectedPart" @on-change="clickSelectAll">全选</Checkbox>
    </div>
    <List border class="data-list">
      <template v-if="websiteList.length == 0">
        <ListItem class="list-item">
          <div style="width: 100%; text-align: center; color: #ccc;">暂无数据</div>
        </ListItem>
      </template>
      <template v-else>
        <CheckboxGroup v-model="selectedUrls">
          <ListItem v-for="(item, index) in websiteList" :key="index" class="list-item">
            <div class="item-top">
              <Checkbox :label="item.website"><span></span></Checkbox>
              <KeyValueView title="用户独立站" :value="item.website"></KeyValueView>
              <KeyValueView title="重复数" :value="item.c"></KeyValueView>
            </div>
            <div class="item-bottom">
              <Button type="primary" icon="md-hand" size="small" @click="showSameWebsiteCustomers(item.website)">处理</Button>
            </div>
          </ListItem>
        </CheckboxGroup>
      </template>
    </List>
    <div style="float: right; margin-top: 20px;">
      <Page :total="tPage.total" :page-size="tPage.stepNumber" :current="tPage.currentPage" @on-change="changePage"
            @on-page-size-change="sizeChange" :page-size-opts=[10,20,40]
            show-sizer show-elevator/>
    </div>

    <Modal v-model="status.modalCustomer.isShow" title="相同独立站目标客户" :scrollable=false
           :styles="{top: '20px',bottom:'20px',width:'70%',}" >
      <div style="padding: 8px">
        <span class="tiy_key">独立站:</span> <span>{{tParam.website}}</span>
      </div>
      <Table stripe border ref="customerList" :columns="customerTableTitles" :data="customerList"
             @on-selection-change="userSelectedChanged" class="table_css" no-data-text="暂无数据" ></Table>
      <div slot="footer">
        <Button type="primary" style="margin-right: 10px" @click="status.modalCustomer.isShow = false" >取消</Button>
        <Button type="warning" style="margin-right: 10px" icon="md-trash" @click="confirmInvalidCustomers" :disabled="!hasSelectItems" >设为无效</Button>
      </div>
    </Modal>

    <!--推广用户详情弹出框-->
    <Modal v-model="status.modalCustomerInfo.isShow" title="目标用户详情"
           :styles="{top: '20px',bottom:'20px',width:'70%',}" :scrollable=false>
      <Row >
        <i-col span="12">
          <Card style="margin-right: 20px">
            <p slot="title">内部信息</p>
            <div>
              <p><span class="tiy_key">姓名 : </span> {{customerDetail.name}}</p>
              <p><span class="tiy_key">编号 : </span> {{customerDetail.number}}</p>
              <p><span class="tiy_key">状态 :</span> {{customerDetail.stateTitle}}</p>
              <p><span class="tiy_key">负责人 :</span> {{customerDetail.employeeName}}</p>
              <p><span class="tiy_key">站内信地址 :</span> {{customerDetail.contactUrl}}</p>
              <p><span class="tiy_key">扩展邮箱 :</span> {{customerDetail.externalEmail}}</p>
              <p><span class="tiy_key">导入时间 :</span> {{customerDetail.createtime}}</p>
              <p><span class="tiy_key">备注 :</span> {{customerDetail.description}}</p>
            </div>
          </Card>
        </i-col>
        <i-col span="12">
          <Card style="margin-right: 20px;margin-left: 20px;">
            <p slot="title">来源平台信息</p>
            <p><span class="tiy_key">来源 :</span> {{customerDetail.channel}}</p>
            <p><span class="tiy_key">账号 : </span><Avatar :src="customerDetail.avatar" size="large"/> {{customerDetail.name}}</p>
            <p><span class="tiy_key">全名 : </span>{{customerDetail.fullName}}</p>
            <p><span class="tiy_key">粉丝数 : </span>{{customerDetail.followerCount}}</p>
            <p><span class="tiy_key">关注数 :</span>{{customerDetail.followingCount}}</p>
            <p><span class="tiy_key">店铺 :</span><a target="_blank" :href="customerDetail.externalUrl">{{customerDetail.externalUrl}}</a></p>
            <p><span class="tiy_key">邮箱 :</span>{{customerDetail.email}}</p>
          </Card>
        </i-col>
      </Row>
      <Row><!--表格-->
        <i-col span="24">
          <Card style="margin-right: 20px;margin-left: 20px;">
            <p slot="title">操作记录</p>
            <Table  stripe border  :columns="recordTable" :data="customerDetail.opRecords" class="table_css"
                    no-data-text="暂无数据" style="margin:0;"></Table>
          </Card>
        </i-col>
      </Row>
    </Modal>
  </div>
</template>

<!--javascript 代码-->
<script>
  import ICol from "../../../node_modules/view-design/src/components/grid/col";
  import tiyData from "./js/sameWebsite/sameWebsite_data";
  import {
    init,
    searchService,
    getCustomerByWebsite,
    getCustomerDetail,
    invalidCustomers,
      clearSameWebsitesCustomers
  } from "./js/sameWebsite/sameWebSite_funs";
  import {isNotEmpty} from "../js/commonUtils";
  import KeyValueView from "../widgets/KeyValueView";

  export default {
    components: {KeyValueView, ICol},
    data(){
      return {
        tRole: {//权限
          OPERATIONS_2_101: "OPERATIONS-2-101"
        },
        tParam : tiyData.tParams,
        tPage : tiyData.tPage,
        websiteList : tiyData.tData.websiteList,
        websiteTableTitles :tiyData.websiteTableTitles(this),
        customerList : tiyData.tData.customerList,
        customerTableTitles :tiyData.customerTableTitles(this),
        status : tiyData.tStatus,
        //字典 推广客户状态
        targetCustomerStateDict: this.$store.getters.dictionaries.targetCustomerStateDict,
        customerDetail : tiyData.tData.customerInfo,
        customerOperationDict : this.$store.getters.dictionaries.customerOperation,
        recordTable:tiyData.recordTable(this),
        selectedUrls: [],
        selectedAll: false,
        selectedPart: false,
      }
    },
    computed: {

      filterStateList(){
        var stateList =  this.$store.getters.dictionaries.targetCustomerStateDict;
        var result =  this._.filter(stateList,function (item) {
          return item.value !==100 && item.value !==110 && item.value !==310 && item.value !==600  ;
        });
        return  this._.forEach(result,function (item) {
          if(item.value===200){
            item.name ="已确认有效";
          }
          if(item.value===300){
            item.name ="已确认无效";
          }
          if(item.value===310){
            item.name ="已确认废弃";
          }
          if(item.value===500){
            item.name ="已联系过";
          }
          if(item.value===120){
            item.name ="待开发";
          }
        });
      },
      hasSelectItems(){
        return tiyData.tParams.selectedUsers.length>0;
      }
    },
    methods: {
      changePage(page){
        tiyData.tPage.currentPage = page;
        searchService(this, tiyData);
      },
      sizeChange(p){
        tiyData.tPage.stepNumber = p;
        searchService(this, tiyData);
      },
      showSameWebsiteCustomers(website){
        tiyData.tParams.website = website;
        getCustomerByWebsite(this, tiyData);
      },
      getCustomerDetail(id, state){
        getCustomerDetail(this, tiyData, id, state);
      },
      userSelectedChanged(selection){
        tiyData.tParams.selectedUsers = selection;
      },
      confirmInvalidCustomers(){ //设为无效
        let self = this;
        this.$Modal.confirm({
          title: "确认操作",
          content: "是否将这些客户设为无效？",
          onOk: () => {
            invalidCustomers(self, tiyData);
          }
        });
      },
        search(){
            tiyData.tPage.currentPage = 1;
            searchService(this, tiyData);
        },
        urlSelectedChanged(selection){
            tiyData.tParams.selectedUrls = selection;
        },
        clearSameWebsitesCustomers(){
          tiyData.tParams.selectedUrls.splice(0);
          tiyData.tParams.selectedUrls.push(...this.selectedUrls);
            clearSameWebsitesCustomers(this, tiyData);
        },
      hasAuthority(code) {
        return this.$authority(code);
      },
      isNotEmpty(val) {
        return isNotEmpty(val);
      },
      clickSelectAll(selected) {
        if(selected) {
          let ids = this.websiteList.map(item => {return item.website});
          this.selectedUrls.splice(0, this.selectedUrls.length, ...ids);
        }else{
          this.selectedUrls.splice(0);
        }
      },
    },
    created(){
      init(this, tiyData);
      // searchService(this, tiyData);
    },
    watch: {
      "selectedUrls": {
        handler(newVal, oldVal) {
          if(newVal.length > 0) {
            if(newVal.length == this.websiteList.length) {
              this.selectedAll = true;
              this.selectedPart = false;
            }else{
              this.selectedAll = false;
              this.selectedPart = true;
            }
          }else{
            this.selectedAll = false;
            this.selectedPart = false;
          }
        },
      }
    }
  }
</script>

<!--css样式-->
<style scoped lang="less">
  @import  (once,optional)  "../css/base.less";

  .table_css {
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .modal_newuser_form {
    padding-left: 60px;
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .modal_newuser_form_input {
    width: 180px;
    margin-right: 10px;

  }

  .tiy_key {
    color: #9e9e9e;
    min-width: 90px;
    display: inline-block;
    text-align: right;
    padding-right: 0.5rem;
  }

  .data-list {
    margin: 1rem 0rem;
    line-height: 25px;
    .list-item {
      .flex-colum-wrap;
      justify-items: left;
      align-items: start;
      .item-checkbox {
        display: inline-block;
        width: 25px;
        height: 25px;
        text-align: center;
        vertical-align: top;
      }
      .item-img {
        width: 130px;
        text-align: center;
        display: inline-block;
      }
      .item-top{
        width: 100%;
        margin-bottom: 5px;
        .flex-row-wrap;
        justify-content: left;
      }
      .item-content {
        margin-bottom: 35px;
        text-align: left;
      }
      .item-bottom{
        //position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        display: block;
        //padding: 0 1rem 0.5rem 0;
        text-align: right;
        button {
          margin-left: 0.5rem;
        }
      }
    }
  }
</style>
